---
layout: default
title: "Popover - Sleek Admin Dashboard Template"


parent: "components"
sub_parent: "components"
activePage: "popover-tooltip"
plugins: []
---
							<div class="breadcrumb-wrapper">
								<h1>Popover & Tooltip</h1>
								{% include breadcrumb.htm %}
							</div>

							<div class="row">
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Popover Basic</h2>
										</div>
										<div class="card-body">
											<p class="pb-5"> Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.1/components/popovers/"
												 target="_blank">more details.</a>
											</p>
											<button type="button" class="btn mb-1 btn-primary btn-pill" data-toggle="popover" title="Popover Title" data-content="Lorem ipsum dolor sit amet consectetur elit sed do.">Launch popover</button>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Tooltips Basic</h2>
										</div>
										<div class="card-body">
											<p class="mb-5"> Adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.1/components/popovers/" target="_blank">more details.</a>
											</p>
											<button type="button" class="btn mb-1 btn-primary btn-pill" data-toggle="tooltip" title="Tooltip Title">Launch Tooltip</button>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Four Directions Popover </h2>
										</div>
										<div class="card-body">
											<p class="pb-5"> Four options are available: top, right, bottom, and left aligned. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.1/components/popovers/" target="_blank">more details.</a>
											</p>
											<button type="button" class="btn mb-1 btn-info btn-pill" data-container="body" data-toggle="popover" data-placement="top"
											 data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
												Popover on top
											</button>

											<button type="button" class="btn mb-1 btn-warning btn-pill" data-container="body" data-toggle="popover" data-placement="right"
											 data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
												Popover on right
											</button>

											<button type="button" class="btn mb-1 btn-danger btn-pill" data-container="body" data-toggle="popover" data-placement="bottom"
											 data-content="Vivamus
												sagittis lacus vel augue laoreet rutrum faucibus.">
												Popover on bottom
											</button>

											<button type="button" class="btn mb-1 btn-dark btn-pill" data-container="body" data-toggle="popover" data-placement="left"
											 data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
												Popover on left
											</button>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2> Four Directions Tooltip</h2>
										</div>
										<div class="card-body">
											<p class="pb-5"> Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.1/components/popovers/"
												 target="_blank">more details.</a>
											</p>
											<button type="button" class="btn mb-1 btn-pill btn-info" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
												Tooltip on top
											</button>
											<button type="button" class="btn mb-1 btn-pill btn-danger" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
												Tooltip on bottom
											</button>
											<button type="button" class="btn mb-1 btn-pill btn-warning" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
												Tooltip on right
											</button>
											<button type="button" class="btn mb-1 btn-pill btn-dark" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
												Tooltip on left
											</button>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Dismiss on Next Click Popover</h2>
										</div>
										<div class="card-body">
											<p class="pb-5"> Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.1/components/popovers/"
												 target="_blank">more details.</a>
											</p>
											<button type="button" class="btn mb-1 btn-lg btn-success btn-pill" data-toggle="popover" data-trigger="focus" title="Popover Title"
											 data-content="Lorem ipsum dolor sit amet consectetur elit sed do.">Launch popover</button>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Disabled elements</h2>
										</div>
										<div class="card-body">
											<p class="pb-5"> Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click
												them to trigger a tooltip. Read bootstrap documentation for <a href="https://getbootstrap.com/docs/4.1/components/popovers/"
												 target="_blank">more details.</a>
											</p>
											<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
												<button class="btn mb-1 btn-success btn-lg btn-pill" style="pointer-events: none;" type="button" disabled>Disabled button</button>
											</span>
										</div>
									</div>
								</div>
							</div>
